<template>
    <div>
        <el-card>
            <template #header>
                <div class="cardHeader">
                    <sx-form
                        :inline="true"
                        :formItem="formItem"
                        :data="queryData"
                    ></sx-form>
                    <el-button type="primary" @click="dialogVisible = true">{{
                        $t("新增基地")
                    }}</el-button>
                </div>
            </template>
            <sx-table
                :data="tableData"
                :key="tabelKey"
                :tableColumn="tableColumn"
            />
            <sx-pagination
                :total="pageTotal"
                :key="pageTotal"
                v-model="queryData.pageNum"
            />
        </el-card>
        <el-dialog v-model="dialogVisible" :title="$t('新增基地')" width="500">
            <sx-form
                :formItem="dialogItem"
                v-if="dialogVisible"
                :data="dialogData"
                labelPosition="top"
            ></sx-form>
        </el-dialog>
    </div>
</template>
<script setup lang="ts">
import { ref, reactive, watch } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { useI18n } from "vue-i18n"; // 引入 useI18n
import {
    authTeamList,
    newBase,
    getBaseList,
    updateBase,
    removeBase,
} from "@/api/base";
import { useStore } from "@/stores";
const store = useStore();
// 添加以下代码
const { t } = useI18n(); // 使用 useI18n 获取 $t
//添加基地对话框
const dialogVisible = ref(false);
// 查询表单列表
const formItem = [
    {
        prop: "keyWords",
        type: "input",
        label: "基地名称",
        placeholder: "请输入基地名称",
        isKeyup: true,
    },
    {
        type: "buttons",
        children: [
            {
                type: "primary",
                value: "查询",
                subMit: true,
                click: (data: any) => {
                    queryData.keyWords = data.keyWords;
                    getBaseListItems();
                },
            },
        ],
    },
];
// 查询表单数据
const queryData = reactive({
    pageNum: 1,
    pageSize: 10,
    keyWords: "",
});

// 对话框表单列表
const dialogItem = reactive([
    {
        prop: "baseName",
        type: "input",
        label: "基地名称",
        placeholder: "请输入基地名称",
        rules: [
            {
                required: true,
                message: "请输入基地名称",
                trigger: "blur",
            },
        ],
    },
    {
        type: "buttons",
        children: [
            {
                type: "",
                value: "取消",
                click: (data: any) => {
                    console.log(data);
                    dialogVisible.value = false;
                },
            },
            {
                type: "primary",
                subMit: true,
                value: "提交",
                click: (data: any) => {
                    console.log(data);
                    if (data.baseId) {
                        updateBase(data).then((res) => {
                            ElMessage.success(t("操作成功"));
                            dialogVisible.value = false;
                            getBaseListItems();
                        });
                    } else {
                        newBase(data).then((res: any) => {
                            ElMessage.success(t("操作成功"));
                            dialogVisible.value = false;
                            getBaseListItems();
                        });
                    }
                },
            },
        ],
    },
]);
// 对话框表单数据
const dialogData = reactive({
    baseName: "",
    baseId: "",
});
// 表格列表
const tableColumn = reactive([
    {
        prop: "baseName",
        label: "基地名称",
        type: "text",
    },
    {
        prop: "createTime",
        label: "创建时间",
        type: "text",
    },
    {
        label: "操作",
        width: "auto",
        type: "buttons",
        children: [
            {
                label: "编辑",
                type: "primary",
                link: true,
                disabled: false,
                size: "small",
                click: (data: any) => {
                    Object.assign(dialogData, data);
                    dialogVisible.value = true; // 打开对话框
                },
            },
            {
                label: "基地",
                type: "primary",
                link: true,
                disabled: false,
                size: "small",
                click: (data: any) => {
                    const baseUrl = import.meta.env.VITE_MAP;
                    const mapUrl = `${baseUrl}/?baseId=${data.baseId}&token=${store.token}&baseName=${data.baseName}`;
                    window.open(mapUrl, "_blank");
                },
            },
            {
                label: "删除",
                type: "danger",
                link: true,
                disabled: false,
                size: "small",
                click: (data: any) => {
                    ElMessageBox.confirm(t("确定删除该条数据"), t("提示"), {
                        confirmButtonText: t("确定"),
                        cancelButtonText: t("取消"),
                        type: "warning",
                    }).then(() => {
                        removeBase({
                            id: data.baseId,
                        }).then((res: any) => {
                            ElMessage.success(t("删除成功"));
                            if (
                                queryData.pageNum > 1 &&
                                tableData.length === 1
                            ) {
                                queryData.pageNum -= 1;
                            }
                            getBaseListItems();
                        });
                    });
                },
            },
        ],
    },
]);
// 表格数据
let tableData: any = reactive([]);
// 监听分页变化
watch(
    () => queryData.pageNum,
    (newValue, oldValue) => {
        queryData.pageNum = newValue;
        getBaseListItems();
    },
    { deep: true }
);
// 对话框隐藏时清空对话框表单数据
watch(dialogVisible, (newValue, oldValue) => {
    if (!newValue) {
        dialogData.baseName = "";
        dialogData.baseId = "";
    }
});
const tabelKey = ref(0);
const pageTotal = ref(0);
const getBaseListItems = () => {
    getBaseList(queryData).then((res: any) => {
        tableData = res.data.list;
        tabelKey.value = new Date().getTime();
        pageTotal.value = res.data.total;
    });
};
getBaseListItems();
</script>
